<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">

        <div class="el-col el-col-18">
          <el-form ref="form" :model="query" label-width="80px">
            <el-form-item label="活动名称">
              <el-input v-model="query.subjectName" class="el-input"></el-input>
              <el-button class="el-button" @click="cancel">取消</el-button>
              <el-button @click="searchData">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="el-col el-col-6">
          <el-button class="zxc" @click="bulletframe">
            <i class="el-icon-edit"></i>
            <span class="asd">新增学科</span>
        </el-button>
        </div>
        <el-alert :title="`一共${counts}条数据`" type="info" show-icon></el-alert>
        <div>
          <el-table :data="list" style="width: 100%">
            <el-table-column prop="id" type="index" label="序号">
            </el-table-column>
            <el-table-column prop="subjectName" label="学科名称">
            </el-table-column>
            <el-table-column prop="username" label="创建者"> </el-table-column>

            <el-table-column prop="addDate" label="创建日期">
                 <template slot-scope="scope">
                {{ scope.row.addDate | formtiem}}
              </template>
            </el-table-column>

            <el-table-column label="前台是否显示">
              <template slot-scope="scope">
                {{ scope.row.isFrontDisplay | isFrontDisplay }}
              </template>
            </el-table-column>
            <el-table-column prop="twoLevelDirectory" label="二级目录">
            </el-table-column>
            style="width: 100%">
            <el-table-column prop="tags" label="标签"> </el-table-column>
            <el-table-column prop="totals" label="题目数量"> </el-table-column>
            <el-table-column prop="name" label="操作" width="300px">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="$router.push(`/subjects/directorys?id=${scope.row.id}&name=${scope.row.subjectName}`)"
                  >学科分类</el-link
                >
                <el-link
                  type="primary"
                  :underline="false"
                  @click="$router.push(`/subjects/tags?id=${scope.row.id}&name=${scope.row.subjectName}`)"
                  >学科标签</el-link
                >
                <el-link
                  type="primary"
                  :underline="false"
                  @click="Modifydiscipline(scope.row)"
                  >修改</el-link
                >
                <el-link
                  type="primary"
                  :underline="false"
                  @click="delRoles(scope.row)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-dialog :title="this.isEdit?'修改学科':'新增学科'" :visible.sync="Visible" width="30%" @close="clear">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              class="demo-ruleForm"
            >
              <el-form-item label="学科名称" prop="subjectName">
                <el-input
                  style="width: 308px"
                  v-model="ruleForm.subjectName"
                  placeholder="请输入学科名称"
                />
              </el-form-item>

              <el-form-item label="学科名称">
                <span class="span">是否显示</span>
                <el-switch
                  v-model="ruleForm.isFrontDisplay"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                />
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="Visible = false">取 消</el-button>
              <el-button type="primary" @click="addPermission">确 定</el-button>
            </span>
          </el-dialog>
        </div>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          background
          :page-sizes="[5, 10, 20, 50]"
          :page-size="query.pagesize"
          layout=" prev, pager,sizes, next, jumper"
          :total="counts"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, add, remove, update } from '@/api/hmmm/subjects.js'
import dayjs from 'dayjs'

export default {
  filters: {
    isFrontDisplay (val) {
    //   console.log('isFrontDisplay', val)
      if (val === 1) {
        return '是'
      } else {
        return '否'
      }
    },
    formtiem (tiem) {
      return dayjs(tiem).format('YYYY-MM-DD')
    }
  },
  name: 'Subject',
  data () {
    return {
      counts: 0,
      isEdit: false,
      add: '',
      list: [], // 从接口处取回
      form: {
        name: '',
        province: '潜江' // 从接口处取回
      },

      Visible: false,
      ruleForm: {
        subjectName: '',
        isFrontDisplay: true
      },
      query: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      editForm: {},
      rules: {
        subjectName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.subjects()
  },
  methods: {
    clear () {
    //   console.log('111')
      this.editForm = {}
      this.ruleForm = {}
      //   console.log(this.editForm)
      this.Visible = false
    },

    cancel () {
      this.query.subjectName = ''
      this.subjects()
    },
    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      this.subjects()
    },
    // 当前页面发生改变时触发
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.subjects()
    },
    searchData () {
      this.subjects(this.query)
    },
    // 删除
    async delRoles (row) {
      const confimres = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confimres === 'cancel') return this.$message.info('您取消了删除')

      const res = await remove(row)
      if (res.status === 200 && res.statusText === 'OK') {
        this.$message.success('您删除成功')
        if (this.list.length === 1) {
          this.query.page--
          if (this.query.page < 1) {
            this.query.page = 1
          }
        }
        this.subjects()
      } else {
        this.$message.success('您删除失败')
      }
    },
    // 修改
    async Modifydiscipline (row) {
      this.Visible = true
      this.isEdit = true
      //   console.log(id)
      //   this.ruleForm.id = this.row.id
      //   console.log(row)
      this.editForm = row
      this.ruleForm.id = this.editForm.id
      this.ruleForm.subjectName = this.editForm.subjectName
      if (this.editForm.isFrontDisplay === 1) {
        this.ruleForm.isFrontDisplay = true
      } else {
        this.ruleForm.isFrontDisplay = false
      }
      //   const res = await update(row)
      //   console.log(res)
      //   //   if (!res.success) return this.$message.error(res.message)
      //   this.roleForm = res.data
    },
    bulletframe () {
      this.Visible = true
      this.isEdit = false
    },

    async subjects () {
      const res = await list(this.query)
      //   console.log(res)
      //   this.$message.error(res.message)
      this.list = res.data.items
      this.counts = res.data.counts
    },

    addPermission () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return
        if (!this.isEdit) {
          const res = await add(this.ruleForm)
          //   console.log(res)
          if (res.status === 200 && res.statusText === 'OK') {
            this.$message.success('新增成功')
            this.subjects()
          } else {
            this.$message.success('新增失败')
          }
        } else {
          const res = await update(this.ruleForm)
          //   console.log(res)
          if (res.status === 200 && res.statusText === 'OK') {
            this.$message.success('修改成功')
            this.subjects()
          } else {
            this.$message.success('修改失败')
          }
        }

        // this.editForm = {}
        this.Visible = false
      })

      // const res = await update(row)

      //   console.log(res)
      //   //   if (!res.success) return this.$message.error(res.message)
      //   this.roleForm = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination{
    float: right;
}
.el-link {
  margin-left: 10px;
}
.span {
  font-weight: 700;
  padding: 10px;
}
.dialog-footer {
  margin-left: 200px;
}
.el-icon-edit {
  font-size: 12px;
  color: #fff;
  padding: 0 10px 0 0;
}
.el-input {
  width: 188px;
  height: 32px;
}
.asd {
  color: #fff;
}
.app-container {
  padding: 20px;
}

.el-button {
  margin-left: 9px;
  font-size: 12px;
}
.zxc {
  float: right;
  background-color: rgb(103, 194, 58);
}
.asd {
    color: #fff;
}
el-table {
  margin: 10px;
}
</style>
